<template>
  <div class="industry-distribution">
    <!-- 第一行：标题 -->
    <el-row style="margin-bottom: 20px;">
      <el-col>
        <h3>各行业企业年报报送情况分布</h3>
      </el-col>
    </el-row>

    <!-- 第二行：Tab切换组件 -->
    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
      <el-tab-pane label="各行业已报数" name="reported"></el-tab-pane>
      <el-tab-pane label="异常清退类" name="abnormal"></el-tab-pane>
      <el-tab-pane label="主动申报类" name="proactive"></el-tab-pane>
    </el-tabs>

    <!-- 第三行：横向柱状图 -->
    <div class="chart-container" v-loading="loading">
      <el-table :data="chartData" style="width: 100%" border>
        <el-table-column prop="industry" label="行业" width="150"></el-table-column>
        <el-table-column prop="reportRate" label="年报报送百分比">
          <template #default="scope">
            <el-progress :percentage="scope.row.reportRate" :show-text="false" />
            <span style="margin-left: 10px">{{ scope.row.reportRate }}%</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getIndustryDistributionData } from '@/api/annual-report'

const activeTab = ref('reported')
const loading = ref(false)

// 图表数据
const chartData = ref([
  { industry: '制造业', reportRate: 0 },
  { industry: '批发和零售业', reportRate: 0 },
  { industry: '住宿和餐饮业', reportRate: 0 },
  { industry: '交通运输业', reportRate: 0 },
  { industry: '信息技术服务业', reportRate: 0 },
  { industry: '金融业', reportRate: 0 },
  { industry: '房地产业', reportRate: 0 },
  { industry: '建筑业', reportRate: 0 },
  { industry: '教育业', reportRate: 0 },
  { industry: '医疗服务业', reportRate: 0 }
])

// 处理Tab切换
const handleTabChange = (tabName) => {
  fetchDistributionData(tabName)
}

// 获取各行业企业年报报送情况分布数据
const fetchDistributionData = async (type) => {
  loading.value = true
  try {
    const res = await getIndustryDistributionData({ type: type })
    if (res.data) {
      chartData.value = res.data
    }
  } catch (error) {
    console.error('获取各行业企业年报报送情况分布数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化加载数据
onMounted(() => {
  fetchDistributionData(activeTab.value)
})
</script>

<style scoped>
.industry-distribution {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  height: 100%;
}

.chart-container {
  height: 300px;
  overflow-y: auto;
}
</style>